<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>买买买！我喜欢</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="/ProfessionalDesign/css/iconfont.css" rel="stylesheet">
<!-- 导入bootstrap -->
<!-- <script src="https://code.jquery.com/jquery-3.6.0.js"></script> -->
<script src="https://code.jquery.com/jquery.js"></script><!-- 导入JQuery方便使用ajax插件 -->
<script src="/ProfessionalDesign/lib/bootstrap.min.js"></script><!-- 导入bootstrap核心js文件 -->
   <link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<!-- 导入bootstrap核心js文件 -->
</head>
<body
	style="background: 0 36px repeat-y url(//img.alicdn.com/imgextra/i3/O1CN01PaQurJ1QgnAICTCgg_!!6000000002006-2-tps-1490-2984.png); background-size: cover; overflow-x: hidden;">
	<nav class="navbar navbar-default navbar-static-top"
		style="margin-bottom: 0px;">
	<div class="container-fluid">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse"
				data-target="#myNavbar">
				<span class="icon-bar"></span> <span class="icon-bar"></span> <span
					class="icon-bar"></span>
			</button>
			<a class="navbar-brand" id="top"
				style='padding-left: 300px; color: red'
				href="/ProfessionalDesign/login">亲，请登录</a>
		</div>
		<div class="collapse navbar-collapse" id="myNavbar">
			<ul class="nav navbar-nav" style="padding-left: 100px">
				<li><a id="spc1" href="sign">免费注册</a></li>
				<li><a id="spc2" href="javascript:subToHP()">购物主页</a></li>
				<li class="dropdown"><a href="#" class="dropdown-toggle"
					data-toggle="dropdown" role="button" aria-haspopup="true"
					aria-expanded="false">我的<span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li><a href="javascript:subToHX();">我的信息</a></li>
						<li><a href="/ProfessionalDesign/orderuser?user_id=${userinf.getUserid()}">订单信息</a></li>
						<li><a id="connection" href="MyC?userid=${userinf.userid}">联系客服</a></li>
					</ul></li>
					<li><a id="spc1" href="sign">购物车</a></li>
					<li><a id="spc1" href="sign">收藏夹</a></li>
			</ul>
			<ul class="nav navbar-nav navbar-right" style="padding-right: 300px">
				<li
				><a href="../navbar/">商品分类</a></li>
				<li class="dropdown"><a href="#" class="dropdown-toggle"
					data-toggle="dropdown" role="button" aria-haspopup="true"
					aria-expanded="false">商家中心<span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li><a href="#">已卖出的宝贝</a></li>
						<li><a href="#">免费开店</a></li>
					</ul></li>
			</ul>
		</div>
	</div>
	</nav>
<!-- 侧边广告栏 -->
<div id="left_layer" style="position:fixed; top:150px; left:0px;">
<img src="http://www.mlhd.org/wb/ad/xuanfu/zhifubao.png"><br>
<a href="javascript:;" style="padding-left: 111px;" onclick="javascript:document.getElementById('left_layer').style.display='none';">关闭</a>
</div>

<div id="right_layer" style="position:fixed; top:150px; right:0px;">
<img src="http://www.mlhd.org/wb/ad/xuanfu/zhifubao.png"><br>
<a href="javascript:;" onclick="javascript:document.getElementById('right_layer').style.display='none';">关闭</a>
</div>


	<div id="Myconnect" class="container">
		<div class="row clearfix">
			<div class="col-md-12 column">
				<div style="display: flex;margin-top: -7px;">
					<h1>
						<a href="javascript:subToHP()"
							style="color: #FF7F00; font-family: '华文新魏'; font-size: 54px; text-decoration: none">地猫</a>
						<a href="javascript:subToHP()"
							style="color: #FF7F00; font-family: '华文新魏'; font-size: 32px; text-decoration: none">Dmall.com</a>
					</h1>
					<form id="form1" class="form-inline" method="post" action="querygoods"
						style="display: inline-flex; width: auto; margin-left: 73px;margin-top: 31px;">
						<input type="text" name="userid" value="${userinf.userid}" style="display:none">
						<input type="text" class="queryin" name="selector1" value="宝贝|"
							style="width: 35px" readonly="true"> <input type="text"
							class="queryin" name="selector" value="女装"
							style="width: 600px">
						<input type="submit" id="query"
							value="搜索" class="btn btn-primary" id="select"
							style="margin-left: 1px; width: 70px">
					</form>
				</div>
			</div>
		</div>
		<div class="row clearfix"
			style="background-color: white; border-radius: 25px">
			<!-- 商品广告轮播实现 -->
			<div class="col-md-3 column">
				<ul class="nav nav-sidebar link"
					style="margin-top: 20px; background-color: #F7F9FA; border-radius: 25px">
					<li class="active"><h4
							style="padding-top: 20px; padding-left: 10px;">
							商品分类 <span class="sr-only">(current)</span>
						</h4></li>
					<li style="margin-left: 10px;">
						<span class="iconfont icon-nvzhuang"></span>
						<a class="ahrdfc" href="javascript:nvzhuang()">女装</a>
						<span>/</span>
						<a class="ahrdfc">内衣</a>
						<span>/</span>
						<a class="ahrdfc">奢品</a>
					</li>
					<li style="margin-left: 10px;">
						<span class="iconfont icon-xiezi"></span>
						<a class="ahrdfc">女鞋</a>
						<span>/</span>
						<a class="ahrdfc">男鞋</a>
						<span>/</span>
						<a class="ahrdfc">箱包</a>
					</li>
					<li style="margin-left: 10px;">
						<span class="iconfont icon-nanzhuangleimu"></span>
						<a class="ahrdfc">男装</a>
						<span>/</span>
						<a class="ahrdfc">运动</a>
						<span>/</span>
						<a class="ahrdfc">百货</a>
					</li>
					<li style="margin-left: 10px;">
						<span class="iconfont icon-shouji"></span>
						<a class="ahrdfc">手机</a>
						<span>/</span>
						<a class="ahrdfc">电脑</a>
						<span>/</span>
						<a class="ahrdfc">数码</a>
					</li>
					<li style="margin-left: 10px;">
						<span class="iconfont icon-shipin"></span>
						<a class="ahrdfc">食品</a>
						<span>/</span>
						<a class="ahrdfc">饮料</a>
						<span>/</span>
						<a class="ahrdfc">生鲜</a>
					</li>
						<li style="margin-left: 10px;">
						<span class="iconfont icon-shu"></span>
						<a class="ahrdfc">书本</a>
						<span>/</span>
						<a class="ahrdfc">笔记</a>
						<span>/</span>
						<a class="ahrdfc">图书</a>
					</li>
				</ul>
			</div>
			<div class="col-md-6 column">
				<div class="box" style="border-radius: 40px; margin-top: 20px">
					<div id="carousel-example-generic" class="carousel slide"
						data-ride="carousel">
						<!-- Indicators -->
						<ol class="carousel-indicators">
							<li data-target="#carousel-example-generic" data-slide-to="0"
								class="active"></li>
							<li data-target="#carousel-example-generic" data-slide-to="1"></li>
							<li data-target="#carousel-example-generic" data-slide-to="2"></li>
							<li data-target="#carousel-example-generic" data-slide-to="3"></li>
						</ol>

						<!-- Wrapper for slides -->
						<div class="carousel-inner" role="listbox">
							<div class="item active">
								<img src="./img/ad1.jpeg" alt="清仓大甩卖"
									style="border-radius: 40px">
							</div>
							<div class="item">
								<img src="./img/ad2.jpeg" alt="疯狂嗨购" style="border-radius: 40px">
							</div>
							<div class="item">
								<img src="./img/ad3.png" alt="大牌腕表捡漏"
									style="border-radius: 40px">
							</div>
							<div class="item">
								<img src="./img/ad4.jpeg" alt="限时抢购" style="border-radius: 40px">
								<!-- <div class="carousel-caption">图片4</div> -->
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-3 column">
				<ul class="nav nav-sidebar link"
					style="margin-top: 100px;margin-left: 40px;">
					<li class="active"><h4
							style="text-align:center">
							Hi！欢迎您 <span class="sr-only">(current)</span>
						</h4></li>
					<li style="text-align:center">
					<span style="font-size:20px">尊贵的用户：${userinf.username}</span>
					</li>
				</ul>
				<div style="margin-top: 10px;margin-left: 40px;display: inline-flex;">
				<a style="color: #666666;"><strong style="display:block;text-align:center;color:red;font-size:20px">${received}</strong>待收货</a>
				<a style="margin-left:44px;color: #666666;"><strong style="display:block;text-align:center;color:red;font-size:20px">${payed}</strong>待付款</a>
				<a style="margin-left:44px;color: #666666;"><strong style="display:block;text-align:center;color:red;font-size:20px">${cartnum}</strong>购物车</a>
				</div>
				<div style="margin-top: 10px;margin-left: 77px;">
				<a style="display: inline-grid;color: #666666;"><span class="iconfont icon-xingxing" style="font-size:27px;text-align:center"></span>宝贝收藏</a> 
				<a style="margin-left:41px;display: inline-grid;color: #666666;"><span class="iconfont icon-gouwuche" style="font-size:29px;text-align:center"></span>购物车</a>
				</div>
			</div>
			<br>
			<div class="col-md-12 column"
				style="background-color: white; border-radius: 25px">
				<br>
				<div style="display: flex">
					<strong style="font-family: '宋体'; font-size: 24px">猜你喜欢</strong> <img
						style="width: 64px; height: 20px; margin: 10px 10px"
						src="/ProfessionalDesign/img/like.png">
				</div>
				<br>
				<div>
<!-- 模仿淘宝的主页商品 -->
				<c:forEach var="goods" items="${allgoods}">
				<a href="javascript:toGoodInf(${goods.good_id})" class="goods">
				<div><img src="${goods.g_image}" class="goodimg"></div>
				<div>
				 <div class="goodtitle"><img class="hotpng" src="/ProfessionalDesign/img/hot.png">${goods.good_desc}</div>
			        <div><div class="tag-list"><span class="price-value"><em>¥</em>${goods.price}</span></div></div>
				</div>	
				</a>
				</c:forEach>
				</div>
			</div>
			<!-- 商品结束 -->
		</div>
	</div>
	<!-- 底部框 -->
	<div class="jumbotron text-center"
		style="margin-top: 100px; margin-bottom: 0; background-color: white">
		<br>
		<p>© 2022 ProfessionalDesign.com 版权所有</p>
		<a>关于我们</a>| <a>合作伙伴</a>| <a>营销中心</a>| <a>联系客服</a>| <a>开放平台</a>| <a>诚征英才</a>|
		<a>联系我们</a>| <a>网站地图</a>| <a>法律声明及隐私权政策</a>
	</div>
</body>
<style>
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus
	{
	color: red;
}

.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus
	{
	color: red;
}
.page-header {
	padding-bottom: 9px;
	margin: 0px 0 20px;
	border-bottom: 1px solid #eee;
}

.ul1 {
	padding-inline-start: 55px;
	padding-inline-end: 40px;
}

.ul1 li {
	list-style: none;
	display: inline;
}

.ul1 li a {
	width: 225px;
}
.box {
	width: 600px;
	height: 300px;
	background-color: pink;
}

.carousel, .carousel img {
	width: 100%;
	height: 300px !important;
}

.queryin {
	width: 185px;
	height: 50px;
	outline: none;
	background: transparent;
	border: 0
}

#query {
	height: auto;
	border: 3px solid #FF7F00;
	float: right;
	border-radius: 30px;
	background-color: #FF7F00;
}

#form1 {
	padding-left: 30px;
	width: 211px;
	height: 50px;
	outline: none;
	border: 2px solid #FF7F00;
	margin: 39px 1px 33px 0;
	background: #f1f1f1;
	border-radius: 30px;
}

.link li a {
	display: inline-block;
}
.goods{
	display:inline-flex;
	background-color: #F7F9FA;
    border-radius: 10px;
    margin-top: 10px;
    margin-left: 18px;
    margin-bottom:13px;
    height: 172px;
}
.goods:hover{
	text-decoration:none;
	background-color:transparent;
	border:1px solid #FF7F00;
}
.goodtitle:hover {
    color: #FF7F00;
    text-decoration: none;
}
.goodimg{
	margin-top: 10px;
    margin-left: 10px;
    width:150px;
    height:150px;
    border-radius: 10px;
}

.goodtitle{
	width:186px;
	padding-right: 15px;
    padding-top: 15px;
    padding-left: 10px;
    color:#333;
}
.tag-list{
	padding-top: 40px;
    padding-left: 10px;
    color: red;
    font-size: 25px;
}
.hotpng{
	padding-right: 8px;
}
.ahrdfc{
    color: #666666;
}
</style>
<script>
$(function(){
if(${userinf!=null}){
	$("#top").html('尊贵的用户'+'"'+'${userinf.username}'+'"'+'欢迎您');
}else{
	$("a").attr("href","${pageContext.request.contextPath}/login");
	$("#spc2").attr("href","javascript:subToHP()");
	$("#spc1").attr("href","sign");
}

})
</script>
<script>
function subToHX(){
	var form = $("<form>"); //定义一个form表单  
	form.attr('style', 'display:none'); //在form表单中添加查询参数  
	form.attr('method', 'post');
	form.attr('action', "toUserInfo");
	form.append('<input type="text" name="userid" value="${userinf.userid}">');
	$('body').append(form); //将表单放置在web中  
	form.submit(); //表单提交
}
$('.carousel').carousel({
    interval: 2000
})
function subToHP(){
	if(${userinf!=null}){
		var form = $("<form>"); //定义一个form表单  
	form.attr('style', 'display:none'); //在form表单中添加查询参数  
	form.attr('method', 'post');
	form.attr('action', "tohome");
	form.append('<input type="text" name="userid" value="${userinf.userid}">');
	form.append('<input type="password" name="pwd" value="${userinf.pwd}">');
	$('body').append(form); //将表单放置在web中  
	form.submit(); //表单提交
	}
	else{
		window.location.href="tohome";
	}
}
function toGoodInf(good_id){
	if(${userinf!=null}){
		var form = $("<form>"); //定义一个form表单  
		form.attr('style', 'display:none'); //在form表单中添加查询参数  
		form.attr('method', 'post');
		form.attr('action', "goodInf");
		form.append('<input type="text" name="good_id" value="'+good_id+'">');
		form.append('<input type="text" name="userid" value="${userinf.userid}">');
		form.append('<input type="password" name="pwd" value="${userinf.pwd}">');
		$('body').append(form); //将表单放置在web中  
		form.submit(); //表单提交
	}
	else{
		window.location.href="tohome";
	}
}
$("#connection").click(function (e) {
    e.preventDefault();
    console.log("xhhxhxhxhxhx");
    
    var iframe = $("<iframe>");
    iframe.attr('src',$(this).attr("href"));
    iframe.attr('frameborder',0);
    iframe.attr('width','100%');
    iframe.attr('height','100%');
    var div = $("<div>");
    div.attr('id','dialog');
    div.attr('title','我的客服聊天');
    div.attr('width','800px');
    div.attr('height','800px');
    div.attr('frameborder',0);
    div.append(iframe);
    $("#Myconnect").append(div);
    $("#dialog").dialog();
})
function nvzhuang(){
	var form = $("<form>"); //定义一个form表单  
	form.attr('style', 'display:none'); //在form表单中添加查询参数  
	form.attr('method', 'post');
	form.attr('action', "querygoods");
	form.append('<input type="text" name="selector" value="女装">');
	form.append('<input type="text" name="userid" value="${userinf.userid}">');
	$('body').append(form); //将表单放置在web中  
	form.submit(); //表单提交
}
</script>
</html>